<template>
	<view class="content commonPop">
		<u-popup :show="isAdd" mode="bottom">
			<view class="purchaseBox">
				<view class="baseTop">
					<text @click="changeTab(index)" :class="suo === index?'active':''" v-for="(item,index) in tabList" :key="index">
						{{item}}
					</text>
					<view class="closeBox" @click="cancelForm">
						<image src="../static/closeBtn.png" mode=""></image>
					</view>
				</view>
				
				<view class="baseInfo" v-show="suo == 0">
					<view class="baseTitle">
						基本信息
					</view>
					<view class="baseTxt">
						<text>楼号</text>{{deviceInfo.floorDesc}}
					</view>
					<view class="baseTxt">
						<text>楼层</text>{{deviceInfo.roomNoDesc}}
					</view>
					<view class="baseTxt">
						<text>房间号</text>{{deviceInfo.roomNameDesc}}
					</view>
					<view class="baseTxt">
						<text>品牌</text>{{deviceInfo.brand}}
					</view>
					<view class="baseTxt">
						<text>数量</text>{{deviceInfo.quantity}}
					</view>
					<view class="baseTxt">
						<text>出厂日期</text>{{deviceInfo.manufactureDate}}
					</view>
					<view class="baseTxt">
						<text>机器编号</text>{{deviceInfo.qrCode}}
					</view>
					<view class="baseTxt">
						<text>备注说明</text>{{deviceInfo.remark == null?'':deviceInfo.remark}}
					</view>
				</view>
				
				<view class="baseInfo baseInfo22" v-show="suo == 1">
					<view class="checkProgess">
						<view class="tipp">
							填写进度
						</view>
						<view class="duBox">
							<view class="dudu" :style="{ width: percent + '%' }">
								
							</view>
						</view>
						<view class="duNumber" v-if="xunInfo">
							<text>{{zuoNumber}}</text>/{{xunInfo.inspectionItems.length}}
						</view>
					</view>
					
					<view class="checkli">
						<view class="checkTop">
							<!-- 电源确认 -->
						</view>
						<view class="checkWrap">
							<view class="checkInfo" v-for="(item,index) in xunInfo.inspectionItems" :key="index">
								<view class="checkTitle">
									{{index + 1}}:{{item.itemName}}
								</view>
								<view class="checkChoose">
									<text :class="item.status == 1?'active':''" @click="showTrue(index,1)">正常</text>
									<text :class="item.status == 2?'nactive':''" @click="showTrue(index,2)">异常</text>
								</view>
								<view class="yichang" v-if="item.status == 2">
									<text>异常问题：</text>
									<textarea name="" id="" v-model="item.remark" cols="30" rows="10"></textarea>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="baseBottom" v-if="otherInfo.status != 3">
					<text class="btn1" @click="cancelForm">取消</text>
					<text class="btn2" @click="submitForm">确定</text>
				</view>
				
			</view>
		</u-popup>	
	</view>
</template>

<script>
	import { getDeviceByCode, submitResults } from '@/api/login.js';
	export default {
		name:"baseInfo",
		data() {
			return {
				suo: 0,
				percent: 0,
				tabList: ['基本信息','任务项'],
				isAdd: false,
				zuoNumber: 0,
				deviceInfo:{},
				otherInfo:{},
				xunInfo: {}
			};
		},
		methods:{
			submitForm(){
				if(this.xunInfo.inspectionItems.length == 0) {
					return uni.$u.toast('请选择任务项目!');
				}
				let msgArr = [];
				this.xunInfo.inspectionItems.forEach((item,index)=>{
					if(item.status == 1) {
						msgArr.push(index + 1);
					}
				});
				console.log(msgArr);
				// return;
				if(msgArr.length == 0) {
					return uni.$u.toast(`请检验任务项!`);
				}
				// if(msgArr.length > 0) {
				// 	return uni.$u.toast(`第${msgArr[0]}条任务项未检验!`);
				// }
				let newArr = [];
				this.xunInfo.inspectionItems.forEach(item=>{
					let objj = {
						inspectionItemId: item.id,
						problemDesc: item.itemDesc,
						remark: item.remark,
						status: item.status
					};
					newArr.push(objj)
				});
				submitResults(this.xunInfo.id,JSON.stringify(newArr)).then(res=>{
					if(res.code == 200) {
						uni.$u.toast('操作成功!');
						this.isAdd = false;
						this.$emit('showForm');
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			cancelForm(){
				this.isAdd = false;
			},
			changeTab(index){
				this.suo = index;
			},
			showTrue(index,val){
				let numberArr = [];
				this.xunInfo.inspectionItems.forEach(item=>{
					if(item.status != 0) {
						numberArr.push(item);
					}
				});
				this.zuoNumber = numberArr.length + 1;
				this.percent = parseFloat((parseFloat(this.zuoNumber) / this.xunInfo.inspectionItems.length ) * 100).toFixed(2);
				this.xunInfo.inspectionItems[index].status = val;
			},
			showInfo(val,deviceInfo,otherInfo){
				// getDeviceByCode({deviceCode:val}).then(res=>{
				// 	if(res.code == 200) {
				// 		this.isAdd = true;
				// 		this.deviceInfo = res.data;
				// 	} else{
				// 		uni.$u.toast(res.msg);
				// 	}
				// });
				console.log(deviceInfo);
				this.deviceInfo = deviceInfo;
				this.otherInfo = otherInfo;
				this.xunInfo = val;
				this.isAdd = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.purchaseBox{
			background: #F5F5F5;border-radius: 32rpx 32rpx 0px 0px;padding:0 24rpx;
			
			.baseTop{
				text-align: center;@include flx;justify-content: center;padding:42rpx 0 18rpx;position: relative;
				text{
					display: block;@include baseFont(36rpx,#333,44rpx);margin-right:132rpx;font-weight: 500;
					padding-bottom:18rpx;position: relative;
				}
				text:last-of-type{
					margin-right:0;
				}
				.active{
					color:#3671E9;
				}
				.active::after{
					content:'';width:52rpx;height:6rpx;background-color:#3671E9;border-radius:3rpx;position: absolute;
					bottom:0;left:50%;transform: translateX(-50%);
				}
				.closeBox{
					position: absolute;right:38rpx;top:52rpx;
					image{
						display: block;width:24rpx;height:24rpx;
					}
				}
			}
			.baseBottom{
				margin:0 0 68rpx;@include flx;justify-content: space-between;
				text{
					display: block;width: 336rpx;background: #E6E6E7;border-radius: 40rpx;text-align: center;height:80rpx;
					@include baseFont(30rpx,#17181B,80rpx);
				}
				.btn2{
					background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);color:#fff;font-weight:500;
				}
			}
			.baseInfo{
				background-color:#fff;border-radius:12rpx;padding:24rpx 32rpx;
				
				.checkProgess{
					background: linear-gradient( 180deg, #D9E9FD 0%, #FFFFFF 100%);padding:0 62rpx 0 64rpx;
					border-radius: 24rpx 24rpx 0px 0px;@include flx;align-items: center;
					.tipp{
						@include baseFont(26rpx,rgba(0,0,0,0.5),88rpx);
					}
					.duBox{
						width: 345rpx;height: 16rpx;background: #D5DAE9;
						border-radius: 20rpx;
						.dudu{
							width:10%;height: 16rpx;background: #4385FF;
						}
					}
					.duNumber{
						@include baseFont(26rpx,rgba(0,0,0,0.5),88rpx);
					}
				}
				.checkli{
					.checkTop{
						@include baseFont(30rpx,#333,76rpx);padding:0 32rpx;border-bottom:2rpx solid #F0F0F0;
					}
					.checkWrap{
						.checkInfo{
							border-bottom:2rpx solid #F0F0F0;padding-bottom:32rpx;
							.checkTitle{
								@include baseFont(30rpx,#333,44rpx);padding:32rpx 0 20rpx;
							}
							.checkChoose{
								@include flx;justify-content: space-between;
								text{
									display: block;width: 302rpx;text-align: center;height: 68rpx;background: #fff;
									border-radius: 8rpx;border: 2rpx solid #E9E9E9;@include baseFont(28rpx,#333,68rpx);
								}
								.active{
									background:#E9F0FF;border-color:rgba(54,113,233,0.6);color:#3671E9;
								}
								.nactive{
									background: #FFF0F0;border-color:rgba(255,77,79,0.6);color:#FF4D4F;
								}
							}
							.yichang{
								text{
									display: block;@include baseFont(30rpx,#262626,42rpx);padding:32rpx 0 14rpx;
								}
								textarea{
									display: block;background: #F6F6F6;height:132rpx;border-radius:8rpx;
									@include baseFont(30rpx,#333,42rpx);width:100%;
								}
							}
						}
					}
				}
				
				.baseTitle{
					@include baseFont(28rpx,#000,44rpx);font-weight:500;margin-bottom:12rpx;
				}
				.baseTxt{
					@include baseFont(28rpx,#333,40rpx);margin-bottom:12rpx;@include flx;
					text{
						color:#666;display: block;width:160rpx;
					}
				}
			}
			.baseInfo22{
				height:500rpx;overflow-y: auto;
			}
		}
	}

</style>